<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直幻灯轮播的JS图片切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />
<script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.js"></script>
<style type="text/css">
body
        {
            color: #FFFFFF;
        }
        .section1
        {
            background-color: #BFDA00;
        }
        .section2
        {
            background-color: #2EBE21;
            height: 1024px;
        }
        .section3
        {
            background-color: #2C3E50;
        }
        .section4
        {
            background-color: #FF9900;
        }
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
</style>


</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
<!--     <li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四屏</a></li> -->
</ul>
<div id="ido">
    <div class="section section1">
        <h1>每一个section是一屏，这是第一屏</h3>
    </div>
    <div class="section section2" style="text-align:center;height:1024px">
        <div style="height:100px;color:blue">123</div>
            <h1 class="slide">第二屏的第一屏</h1>
            <h1 class="slide">第二屏的第二屏</h1>
            <h1 class="slide">第二屏的第三屏</h1>
            <h1 class="slide">第二屏的第四屏</h1>

    </div>
    <div >
        <h1>每一个section是一屏，这是第三屏</h3>
    </div>
    <div >
        <h1>每一个section是一屏，这是第四屏</h3>
    </div>
</div>
<script type="text/javascript">
    $(function() {
            $("#ido").fullpage(
                {
                    continuousVertical: false,  //循环演示
                        //绑定菜单
                         anchors: ['page1', 'page2'],
                    menu: '#menu',
                    autoScrolling: true,
                    fitToSection: false,

                });
        });
</script>
</script>
</body>
</html> 